/* Styles des divisions principales de la page */
body{
    background-color: rgb(240, 240, 240);
    margin:0% 0%;
    font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size:0.8em;
}
#page {
    background-color:white;
    width : 65%;
    margin : auto ;
    margin-top: -20px;
    box-shadow: 0 0 3em #C3C3C3;
}
#entete{
    background-color: #ffffff;
    color : #194E83;
    height: 230px;
    padding: 1.5em 0;
}
.entete{
    text-align: center;
}
#pied{
    clear : both;
    margin-top : 1em;
    padding: 1em;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    color: #666;
    text-align: center;
}
#menuGauche {
    margin : 0.8em;
    padding: 1em;
    background-color: white;
    border :  dotted 0.1em #333;
    border-radius: 10px;
    background-color: #ECECEC;
    float: left;
    width: 18%;
}

#menuGauche .intro{
    text-align: center;
}

#contenu{
    border: none;
    background-color: white;
    margin-top : 1.2em;
    margin-left: 18%;
    /* permet de fixer une hauteur mini sur les navigateurs modernes */
    min-height:27em;
    /* pour obtenir le m�me effet sur IE, sachant que si le contenu d�passe, il
    "poussera" la hauteur en ne respectant pas la norme. On se joue de ses lacunes
    */
    height:27em;
}

#contenuAccueil{
    border: none;
    background-color: white;
    margin-top : 1.2em;
    /* permet de fixer une hauteur mini sur les navigateurs modernes */
    min-height:27em;
    /* pour obtenir le m�me effet sur IE, sachant que si le contenu d�passe, il
    "poussera" la hauteur en ne respectant pas la norme. On se joue de ses lacunes
    */
    height:27em;
}
/* pour r�tablir le mauvais effet sur les nav. modernes */
html>body #contenu{
    height:auto;
}

/* style � appliquer � la balise ul d'identifiant menulist */
ul#menuList{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 98%;
    font-size: 1em;
}

/* style � appliquer aux �l�ments de la balise ul d'identifiant menulist */
ul#menuList li {
    position:relative;
    margin:0px;
    padding: 0px;
}

ul#menuList .first a {
    border-top: 1px solid #DADADA;
}

/* apparences des liens dans listes et sous-listes non num�rot�es */
ul#menuList a {
    color: rgb(0,85,227);
    display:block;
    text-decoration:none;
    width:100%;
    padding: 0.5em;
    border-bottom: 1px solid #DADADA;
    transition: all .5s;
    -webkit-transition: all .5s; 
       -moz-transition: all .5s; 
         -o-transition: all .5s; 
}
ul#menuList a:hover {
    background: #4E4E4E;
    color: white;
    transition: all .5s;
    -webkit-transition: all .5s; 
       -moz-transition: all .5s; 
         -o-transition: all .5s; 
}

ul#menuList .deco a {
    color: #9C0000;
    font-weight: bold;
}

ul#menuList .deco a:hover {
    color: #fff;
    background: #9C0000;
}

#entete #logoGSB {
    width : 238px;
    height : 152px;
}

#entete h1 {
    font-size : x-large;
    text-align:center;
}

#contenu h1{
    text-align: center;
    font-size: 20px;
    color: #656565;
    margin-bottom: 3em;
}

#contenu pre {
    width:95%;
    overflow : scroll;
}

.logoValidW3c {
    display: inline;
}
#libValidW3c{
    display : inline;
    vertical-align:middle;
}

/* Style des formulaires */
.corpsForm {
    border-bottom-width:1px;
    margin-bottom : 0em;
    width : 95%;
}
.piedForm {
    border-bottom-width : 0.1em;
    border-left-width : 0.1em;
    border-right-width : 0.1em;
    border-top-width : 0em;
    border-style : solid;
    border-color : #000;
    text-align:right ;
    width : 95%;
    margin-top:0em;
}
form {
    margin-bottom:1em;  
}
.corpsForm legend {
    font-weight:bold;
    font-size:1.2em;
}
.corpsForm label{
    float: left;
    text-align:right;
    width:33%;
    margin: 0;
    padding: 0 .5em 0 0;
    line-height: 1.8;	
}
input, button, textarea, select{
    font-family:"Trebuchet MS", sans-serif;
    font-size : 1em;
}
button{
    width : 60px;
    height : 30px;
    text-align:center;
    vertical-align:middle;
}
input:hover, textarea:hover, select:hover{
    background-color : #FAFAE6;
    cursor : pointer;
}

/*  Le texte des messages d'erreur est de couleur rose sur fond ocre et de 
taille de caract�res l�g�rement sup�rieure � la normale */
.erreur{ 
    background-color: #BA2222;
    color: #ffffff;
    font-size: 1.2em;
    padding: 0.02em;
    width: 100%;
}
.centre {
    text-align:center;
}

.info {
    background-color:rgb(178,207,81);
    color : white;
    font-size:1.1em;
    width : 95%  
}

.encadre {
    margin-left: 22%;
    padding: 0 2em;
    border : solid 0.1em #000;
    width : 72%;
}

.encadre table{
    width: 100%;
}
/* Style pour les liens de la page principale */
#contenu .corpsTexte {
    width:80%;
    font-size:1.2em;
}

/* Style pour les liens de la page principale */
#contenu a {
    font-size : 1.1em;
    color:gray;
    text-decoration:none;
}
#contenu a:hover {
    text-decoration:underline;
    background-color : #D9BB7A;
    font-size : 1em;
}

/* Style pour les parties importantes de la page principale */
#contenu strong {
    font-weight:bold;
}

/* Styles pour les tableaux de la page principale */
#contenu table {
    background-color:#FFF;
    border : 0.1em solid #777777;
    color:black;
    margin-right : auto ;
    margin-left:0.3em;
    border-collapse : collapse;
}

/* Style pour les lignes d'en-t�te des tableaux */
#contenu th {  
    background-color:#77AADD;
    height:21px;
    text-align:left;
    vertical-align:top;
    font-weight:bold;
    border-bottom:0.1em solid #777777;
    font-size:1.1em;
} 

#contenu td {
    border :1px solid #777777;
}

#contenu h3 {
    font-size : 1.2em;
}
table.listeLegere {
    /*    width:80%;*/
    margin-bottom : 0.5em;
}

/* Tableaux quadrill�s utilis�s pour l'affichage de listes avec contenu l�ger*/ 
table.listeLegere th, table.listeLegere td {
    border : dotted rgb(178,207,81) 0.1em;
    vertical-align : top;
    text-align : left;
}

table.listeLegere th{
    background-color: #429B4D;
    padding:0.5em;
    color: #ffffff;
}

table.listeLegere input[type="text"]{
    border: none;
    padding:0.5em;
}

table.listeLegere caption {
    font-size : 1.1em;
    text-align : left;
    margin-bottom : 0.3em;
}
table.listeLegere td {
    vertical-align:top;
    font-weight:normal;
}
table.listeLegere th.eltForfait{
    color:black;
}
table.listeLegere th.date, table.listeLegere th.montant{
    width:15%;
}
table.listeLegere th.libelle{
    width:70%;
}

#contenu h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #1D2941;
    text-decoration: none;
    height : 28px;
}

/* Ce qui suit concerne la page de connecxion */
h2.accueil{
    text-align: center;
    margin-bottom: 3em;
}

form.accueil{
    width: 50%;
    margin: auto;
    padding: 2em;
    text-align: center;
    background-color: #ECECEC;
    border-radius: 20px;
}

label{
    display: inline-block;
    width: 100px;
}

form.accueil input[type="text"], form.accueil input[type="password"]{
    width: 200px;
    height: 30px;
    border: none;
    padding: 0 0.5em;
}

input[type="submit"]{
    height: 35px;
    border: 1px solid #3079ed;
    margin-top: 1em;
    color: #fff;
    text-shadow: 0 1px rgba(0,0,0,0.1);
    background-color: #4983CC;
    background-image: -webkit-linear-gradient(top,#4983CC,#336DB7);
    background-image: -moz-linear-gradient(top,#4983CC,#336DB7);
    background-image: -ms-linear-gradient(top,#4983CC,#336DB7);
    background-image: -o-linear-gradient(top,#4983CC,#336DB7);
    background-image: linear-gradient(top,#4983CC,#336DB7);
    transition: all .5s;
    -webkit-transition: all .5s; 
       -moz-transition: all .5s; 
         -o-transition: all .5s; 
}

input[type="submit"]:hover{
    border: 1px solid #193470;
    background-image: -webkit-linear-gradient(top,#4983CC,#193470);
    background-image: -moz-linear-gradient(top,#4983CC,#193470);
    background-image: -ms-linear-gradient(top,#4983CC,#193470);
    background-image: -o-linear-gradient(top,#4983CC,#193470);
    background-image: linear-gradient(top,#4983CC,#193470);
    transition: all .5s;
    -webkit-transition: all .5s; 
       -moz-transition: all .5s; 
         -o-transition: all .5s; 
}

#contenu img {
    height : 28px;
    float : left;

}

form select{
    width: 250px;
    height: 30px;
    background: #ffffff;
}

form select:hover{
    background-color: #F2F2F2;
}

.center{
    text-align: center;
}

input[type="text"]{
    border: none;
    padding: 0.5em;
}